<template>
  <div class="add-video">
    <el-form :model="form" class="my-form" label-width="100px" :disabled="disabled">
      <el-form-item label="频道" required>
        <el-select v-model="form.channel_label" placeholder="全部" style="width: 300px;" @change="selectChannel">
          <el-option :label="item.cn_name" :value="item.id" v-for="(item, index) in channelList" :key="index" />
        </el-select>
      </el-form-item>
      <el-form-item label="视频标题" required>
        <el-input clearable v-model="form.title" style="width: 300px;" maxlength="50" placeholder="请输入视频标题，建议50字符以内" />
      </el-form-item>
      <el-form-item label="视频封面" required>
        <UploadFile @imgUploadSuc="imgUploadSuc" :p-img-url="form.cover_url" :type="'image'" :tip="'建议封面图尺寸 600px*350px'">
        </UploadFile>
      </el-form-item>
      <el-form-item label="视频文件" required>
        <UploadFile :type="'video'" @removeFile="removeFile" :fileList="fileList" @videoUploadSuc="videoUploadSuc"
          :tip="'请选择视频文件，单个视频时长建议小于5分钟'">
        </UploadFile>
      </el-form-item>
      <el-form-item label="指定国家" required>
        <el-checkbox class="check-all" v-model="checkAll" :indeterminate="isIndeterminate"
          @change="selectAllCountry">全部</el-checkbox>
        <el-checkbox-group v-model="form.country" @change="selectCountry">
          <el-checkbox v-for="(item, index) in countryList" :key="index" :label="item.id">{{ item.cn_name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="展示顺序" required>
        <el-input v-model.number="form.sort" style="width: 300px;" placeholder="请输入正整数，数字越大，展示越靠前" />
      </el-form-item>
    </el-form>
    <el-form-item class="btn-box">
      <el-button @click="back">返回</el-button>
      <el-button type="primary" @click="submitVideo" :disabled="disabled">提交</el-button>
    </el-form-item>
  </div>
</template>

<script setup name="VideoTutorialAdd">
import { reactive, ref, onMounted, toRefs, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useTabNar } from '@/stores/tabnar';
import { useCommonStore } from '@/stores';
import UploadFile from './components/UploadFile.vue';
import { videoTutorialsGetEnum, videoTutorialsAdd, videoTutorialsEdit } from '@/api/operateManage/videoManage';
import { ElLoading, ElMessage } from 'element-plus';
import { isEmpty } from 'lodash-es';

//data
const router = useRouter()
const route = useRoute()
const tabNar = useTabNar()
const commonStore = useCommonStore()
const form = reactive({
  channel: '',//视频频道
  channel_label: '',
  title: '',//视频标题
  video: '',//视频地址,
  video_url: '',//视频地址预览,
  cover: '',//视频封面地址
  cover_url: '',//视频封面预览地址
  sort: '',//排序
  country: [],
  id: ''
})
const fileList = ref([]);
const disabled = ref(false)
const isIndeterminate = ref(true);
const checkAll = ref(false);
const channelList = ref([]);
const countryList = ref([]);
const isEdit = ref(false);



// methods
const back = () => {
  // 返回上一页
  router.go(-1)
  tabNar.deleteTab(route)
}

const imgUploadSuc = (image_path) => {
  form.cover = image_path
}

const videoUploadSuc = (video_path) => {
  form.video = video_path
}

const removeFile = () => {
  form.video = ''
}

const selectChannel = (val) => {
  form.channel = val
}

const selectCountry = (val) => {
  form.country = val
  const checkedCount = val.length
  checkAll.value = checkedCount === countryList.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < countryList.value.length
}

const selectAllCountry = (val) => {
  form.country = val ? countryList.value.map(it => it.id) : []
  isIndeterminate.value = false
}

const submitVideo = async () => {
  if (!form.channel) {
    return ElMessage.error("请选择频道");
  } else if (!form.title) {
    return ElMessage.error("请填写视频标题");
  } else if (!form.video) {
    return ElMessage.error("请上传视频文件");
  } else if (!form.cover) {
    return ElMessage.error("请上传视频封面");
  } else if (isEmpty(form.country)) {
    return ElMessage.error("请指定国家");
  } else if (!form.sort) {
    return ElMessage.error("请填写展示顺序");
  }
  if (isNaN(parseInt(form.sort))) {
    ElMessage.error("展示信息请输入正整数")
    return;
  } else {
    form.sort = parseInt(form.sort)
  }
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  let res = null;
  if (isEdit.value) {
    res = await videoTutorialsEdit(form)
  } else {
    res = await videoTutorialsAdd(form)
  }
  loading.close()
  if (res.code === 1000) {
    ElMessage.success("提交成功")
    disabled.value = true;
    setTimeout(() => {
      router.go(-1)
    }, 1000);
  } else {
    ElMessage.success("提交失败")
  }
}

// life cycle

onMounted(async () => {
  if (!isEmpty(commonStore.videoTutorialStatusEnum)) {
    channelList.value = commonStore.videoTutorialStatusEnum.channel;
    countryList.value = countryList.value.concat(commonStore.videoTutorialStatusEnum.country);
  } else {
    const channelRes = await videoTutorialsGetEnum()
    if (channelRes.code === 1000) {
      channelList.value = channelRes.data.channel;
      countryList.value = countryList.value.concat(channelRes.data.country);
      commonStore.videoTutorialStatusEnum = channelRes.data;
    }
  }

  if (route.query.id && !isEmpty(commonStore.videoItem)) {
    isEdit.value = true;
    // 因为form是reactive的，不能直接赋值，否则会丢失响应性
    Object.assign(form, commonStore.videoItem,
      {
        channel_label: commonStore.videoItem.channel_label.cn_name,
        country: commonStore.videoItem.country_data,
        cover_url: commonStore.videoItem.cover_url.uri,
      })
    fileList.value = [{ name: commonStore.videoItem.video, url: commonStore.videoItem.video_url }]
  }

})
</script>

<style lang="less" scoped>
.check-all {
  margin-right: 30px;
}

.add-video {
  margin: 20px;
}

.btn-box {
  margin-top: 50px;

  :deep(.el-form-item__content) {
    display: flex;
    justify-content: center;
  }
}
</style>